<template>
	<view class="content">
		<image class="logo" src="../../static/car_banner.webp" mode="widthFix"></image>
		<view class="banne-top">
			<image src="../../static/banner_top.png" mode=""></image>
			<view class="banne-text">
				免费发布信息，上百家物流给您报价
			</view>
		</view>
		<view class="car_header ">
			
			<view class="row-title">
				在线查价
			</view>
			
			<view class="row-between2">
				<view class="between-start" @click="changeRegionString">
					<view class="placeholder" v-if="cityObject.cityString == ''">始发地</view>
					<view class="origin" v-else>{{cityObject.cityString}}</view>
					<image src="../../static/polygon.png" mode=""></image>
				</view>
				<view class="between-end" @click="changeAimRegionString">
					<view class="placeholder" v-if="cityObject.aimCityString == ''">目的地</view>
					<view class="origin" v-else>{{cityObject.aimCityString}}</view>
					<image src="../../static/polygon.png" mode=""></image>
				</view>
			</view>
			
			<view class="select-cartype">选择车型</view>
			
			<view class="cartype" style="justify-content: space-around;">
				<view :class="[currentIndex == index? 'tag_active' : '','tag']" v-for="(item, index) in tagList"
					:key="index" @click="checked(index)">
					{{ item }}
				</view>
			</view>
			
			<!-- <view class="text-area row-start">
				<image class="icon" src="../../static/car_icon.png" mode="aspectFit"></image>
				<view class="title">{{title}}</view>
			</view>
			
			
			<view class="tagList row-between">
				<view @click="changeRegionString" style="width: 40%;">
					<view class="placeholder" v-if="cityObject.cityString == ''">始发地</view>
					<view class="origin" v-else>{{cityObject.cityString}}</view>
				</view>
				<image src="../../static/wangfan.png" mode="widthFix" style="width: 50upx;height: 50upx;"></image>
				<view @click="changeAimRegionString" style="width: 40%;">>
					<view class="placeholder" v-if="cityObject.aimCityString == ''">目的地</view>
					<view class="origin" v-else>{{cityObject.aimCityString}}</view>
				</view>
			</view>
			<view class="tagList row-between" style="justify-content: space-around;">
				<view :class="[currentIndex == index? 'tag_active' : 'tag']" v-for="(item, index) in tagList"
					:key="index" @click="checked(index)">
					{{ item }}
				</view>
			</view> -->
			
			<!-- <input class="phoneNumber" type="number" placeholder="请输入电话号码" v-model="kzphoneNumber" /> -->
			<!-- <view class="check" @tap="checkCars" data-eventsync="true">免费获取报价</view> -->
			<button  class="check" @click="handler" open-type="getPhoneNumber">免费获取报价</button>
			<!-- <button class="check" open-type="getPhoneNumber" @getphonenumber="checkCars">立即托运</button> -->
			<!-- <view class="tip">首次托运送价值30w全险</view> -->
			<view class="row-center">
				<view>已有</view>
				<!-- <view :class="item.miniStyle" v-for="(item, index) in txtStyle" :key="index">{{ item.digit }}</view> -->
				<view class="popel-num">{{popelNum}}</view>
				<view >人获取托运方案</view>
			</view>
			<view class="slogan-lis">
				<view class="slogan-item">
					<image src="../../static/slogan1.png" mode=""></image>
					<text>发布托运信息</text>
				</view>
				<view class="slogan-item">
					<image src="../../static/slogan2.png" mode=""></image>
					<text>发布托运信息</text>
				</view>
				<view class="slogan-item">
					<image src="../../static/slogan3.png" mode=""></image>
					<text>发布托运信息</text>
				</view>
			</view>
			<liu-choose-address ref="scroll" @change='chooseSuccess'></liu-choose-address>
		</view>
		<view class="pics">
			<image class="pic" :src="item" mode="widthFix" v-for="(item, index) in pics" :key="index"></image>
		</view>
		<view class="filings">备案号：鄂ICP备2021020032号-3X</view>
		<!-- <view class="filings">客服联系电话：400-89763421</view> -->
	</view>
</template>

<script>
	let timer;
	export default {
		data() {
			return {
				title: '您的爱车类型',
				kzphoneNumber: '',
				anchorId: '1',
				currentIndex: 0,
				person: 0,
				cityObject: {
					province: '',
					provinceString: '',
					city: '',
					cityString: '',
					region: '',
					regionString: '',
					aimProvince: '',
					aimProvinceString: '',
					aimCity: '',
					aimCityString: '',
					aimRegion: '',
					aimRegionString: ''
				},
				type: 1,
				tagList: ['轿车', 'SUV', 'MPV'],
				pics: [
					'../../static/img.webp'
				]
			}
		},
		computed: {
			txtStyle() {
				const dightStyle = this.person.toString().split('')
				return dightStyle.map((digit) => ({
					digit,
					miniStyle: 'txt2'
				}))
			},
			popelNum() {
				return this.person.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
			}
		},
		async onLoad(options) {
			//获取主播信息
			if (options.anchorId) this.anchorId = options.anchorId
			await this.getNum()
			// await this.getMap()
			timer = setInterval(() => {
				(async () => {
					await this.getNum()
				})()
			}, 1000 * 60 * 2)
		},
		beforeDestroy() {
			clearInterval(timer)
		},
		methods: {
			handler(e) {
				console.log(e);
				console.log(e.detail.errMsg);
				    console.log(e.detail.iv);
				    console.log(e.detail.encryptedData);
					return
				// 获取用户信息
				tt.getUserProfile({
					force: true,
				  success: userRes => {
				    // 此时的 userRes.userInfo 是不需要解码的，可以直接使用
				    const userInfo = userRes.userInfo;
					this.checkCars(userRes,e)
				  },
				  fail: err => {
					uni.showToast({title:'信息获取失败！',icon: 'fail'})
					// uni.showLoading({title: '信息获取失败！'})
				    console.error('获取用户信息失败:', err);
				  }
				});
			},
			changeRegionString() {
				console.log('改变起始地')
				this.type = 1
				this.$refs.scroll.open()
			},
			changeAimRegionString() {
				console.log('改变目的地')
				this.type = 2
				this.$refs.scroll.open()
			},
			//地址选择成功
			chooseSuccess(e) {
				console.log('省市区选择',e)
				if (this.type == 1) {
					this.cityObject.province = e.value[0].value,
					this.cityObject.provinceString = e.value[0].label,
					this.cityObject.city = e.value[1].value,
					this.cityObject.cityString = e.value[1].label,
					// this.cityObject.region = e.value[2].value,
					// this.cityObject.regionString = e.value[2].label
					console.log('始发地', this.cityObject.regionString)
				} else {
					this.cityObject.aimProvince = e.value[0].value,
					this.cityObject.aimProvinceString = e.value[0].label,
					this.cityObject.aimCity = e.value[1].value,
					this.cityObject.aimCityString = e.value[1].label,
					// this.cityObject.aimRegion = e.value[2].value,
					// this.cityObject.aimRegionString = e.value[2].label
					console.log('目的地', this.cityObject.aimRegionString)
				}
			},
			clearCity() {
				this.cityObject = {
					province: '',
					provinceString: '',
					city: '',
					cityString: '',
					region: '',
					regionString: '',
					aimProvince: '',
					aimProvinceString: '',
					aimCity: '',
					aimCityString: '',
					aimRegion: '',
					aimRegionString: ''
				}
			},
			async getMap() {
				const res = await this.GET('http://121.41.46.17:8083/crm/china/list?pageNum=1&pageSize=10000')
				console.log(res)
			},
			async checkCars(e) {
				console.log(this.kzphoneNumber)
				if (this.cityObject.cityString == '') {
					uni.showToast({
						icon: 'none',
						title: '请填写始发地名称'
					})
					return
				} else if (this.cityObject.aimCityString == '') {
					uni.showToast({
						icon: 'none',
						title: '请填写目的地名称'
					})
					return
				} 
				// else if (this.kzphoneNumber == '' || !this.$methods.handlePhone(this.kzphoneNumber)) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '手机号格式不正确'
				// 	})
				// 	return
				// } 
				else {
					const res = await uni.login()
					const data = {
						encryptedData: e.encryptedData,
						iv: e.iv,
						kzNickname: e.userInfo.nickName,
						vehicleTypeOne: this.tagList[this.currentIndex],
						dyCode: res.code,
						anchorId: this.anchorId,
						kzphoneNumber: this.kzphoneNumber || '',
						kzplatform: '抖音平台',
						...this.cityObject
					}
					const res2 = await this.POST('/crm/clue', data)
					if (res2.code == 200) {
						this.clearCity()
						uni.showModal({
							title: '温馨提示',
							content: '您的托运需求已提交，十分钟内会有相关客服人员与您联系！',
							showCancel: false,
							success: res => {
								console.log('确定')
							}
						})
						this.kzphoneNumber = ''
					} else {
						uni.showModal({
							title: '提示',
							content: '服务器错误！',
							showCancel: false,
							success: res => {
								console.log('确定')
							}
						})
					}
				}
			},
			async getNum() {
				const res = await this.GET('/crm/clue/getKzCount')
				if (res.code == 200) {
					this.person = res.data.kzCount

				}
			},
			async checked(index) {
				this.currentIndex = index
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #efefef;
		overflow-y: auto;

		.car_header {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 94vw;
			border-radius: 30upx;
			// padding: 30upx 0;
			background-color: #fff;
			// box-shadow: 2px 2px 78px -18px rgba(66, 68, 90, 0.37);
			border-radius: 24px;
			overflow: hidden;
		}
	}
	.banne-top {
		width: 94vw;
		padding-top: 24rpx;
		padding-bottom: 40upx;
		image {
			height: 72rpx;
		}
		.banne-text {
			color: #000000;
			font-family: "PingFang SC";
			font-size: 26upx;
			font-style: normal;
			font-weight: 300;
			line-height: 26upx;
			letter-spacing: 2upx;
			opacity: 0.5;
			margin-top: 30upx;
		}
	}
	
	.logo {
		/* height: 200rpx; */
		width: 100%;
		/* margin-top: 200rpx; */
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 30upx;
	}
	
	.row-title {
		background: linear-gradient(118deg, #5FA1FF 44.13%, #06F 86.97%);
		color: #ffffff;
		font-family: "PingFang SC";
		font-size: 30upx;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
		width: 100%;
		height: 78upx;
		padding-left: 34upx;
		box-sizing: border-box;
		line-height: 78upx;
	}
	
	.row-between2 {
		padding-top: 40rpx;
		display: flex;
		.between-start,  .between-end{
			color: #000000;
			font-family: "PingFang SC";
			font-size: 26upx;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
			opacity: 0.5;
			width: 313upx;
			height: 64upx;
			border-radius: 8px;
			background: #f6f6f6;
			line-height: 64upx;
			padding:0 20upx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			image {
				width: 24upx;
				height: 14upx;
			}
		}
		.between-end {
			margin-left: 20upx;
		}
	}
	.select-cartype {
		color: #000000;
		font-family: "PingFang SC";
		font-size: 30upx;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
		opacity: 0.9;
		width: 100%;
		padding: 40upx 0 20upx 24upx;
		box-sizing: border-box;
	}
	.cartype {
		display: flex;
		text-align: center;
		font-family: "PingFang SC";
		font-size: 30upx;
		font-style: normal;
		color: #000000;
		font-weight: 400;
		.tag {
			width: 202upx;
			height: 80upx;
			background: #F0F6FF;
			border-radius: 10px;
			color: #000000;
			opacity: 0.5;
			margin-left: 20upx;
			line-height: 80upx;
			&:first-of-type {
				margin-left: 0;
			}
		}
		.tag_active {
			border-radius: 10px;
			border: 2upx solid #1777FF;
			opacity: 0.9;
		}
	}
	.text-area {
		display: flex;
		justify-content: center;
		width: 100%;
		margin-bottom: 50upx;

		.icon {
			width: 50upx;
			height: 50upx;
			margin-right: 10upx;
			margin: 0 10upx 0 30upx;
		}
	}

	.phoneNumber {
		width: 80%;
		height: 60upx;
		line-height: 60upx;
		margin: 0 0 30upx 0;
		padding: 10upx 0;
		border: 1upx solid #333333;
		border-radius: 10upx;
		text-align: center;
	}

	.tagList {
		width: 80%;
		margin-bottom: 50upx;
		.placeholder {
			width: 100%;
			height: 60upx;
			line-height: 60upx;
			padding: 10upx 0;
			border: 1upx solid #333333;
			border-radius: 10upx;
			text-align: center;
			color: #a0a0a0;
			font-size: 28upx;
		}
		.origin {
			width: 100%;
			height: 60upx;
			line-height: 60upx;
			padding: 10upx 0;
			border: 1upx solid #333333;
			border-radius: 10upx;
			text-align: center;
			font-size: 32upx;
			font-weight: bold;
		}

		.destination {
			width: 100%;
			height: 60upx;
			line-height: 60upx;
			padding: 10upx 0;
			border: 1upx solid #333333;
			border-radius: 10upx;
			text-align: center;
			font-size: 32upx;
		}

		.tag {
			padding: 15upx 35upx;
			border-radius: 14upx;
			color: #868686;
			font-size: 30upx;
			border: 1upx solid #efefef;
			background-color: #efefef;
		}

		.tag_active {
			padding: 15upx 35upx;
			border-radius: 14upx;
			color: #3388e8;
			font-size: 30upx;
			font-weight: 700;
			background-color: #ffffff;
			border: 1upx solid #3388e8;
		}
	}

	.check {
		// padding: 10upx 60upx;
		width: 646upx;
		height: 88upx;
		line-height: 88upx;
		border-radius: 12upx;
		text-align: center;
		background-color: #1777FF;
		margin: 40upx 0 25upx 0;
		color: #ffffff;
		text-align: center;
		font-family: "PingFang SC";
		font-size: 30upx;
		font-style: normal;
		font-weight: 400;
	}
	
	.row-center {
		color: #666;
		font-family: "PingFang SC";
		font-size: 26upx;
		font-style: normal;
		font-weight: 400;
		line-height: 26upx;
		letter-spacing: 2upx;
		margin-bottom: 25upx;
		.popel-num {
			font-family: "Poppins";
			font-size: 36upx;
			font-weight: 700;
			line-height: 36upx;
			letter-spacing: 2upx;
			color: #222;
			margin: 0 12upx;
		}
	}
	.slogan-lis {
		display: flex;
		align-items: center;
		padding-bottom: 40upx;
		.slogan-item {
			color: #1777ff;
			font-family: "PingFang SC";
			font-size: 26upx;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
			opacity: 0.8;
			margin-left: 40upx;
			display: flex;
			align-items: center;
			&:first-of-type {
				margin-left: 0;
			}
			image {
				width: 26upx;
				height: 26upx;
				margin-right: 8upx;
			}
		}
	}

	.tip {
		font-size: 28upx;
		color: #afafaf;
		margin: 10upx 0 30upx 0;
	}

	// .txt1 {
	// 	font-size: 32upx;
	// 	font-weight: 500;
	// 	color: #333333;
	// 	margin: 0 10upx;
	// }

	// .txt2 {
	// 	font-size: 58upx;
	// 	font-weight: 700;
	// 	color: #333333;
	// 	margin: 0 2upx 20upx 2upx;
	// 	border: 1upx solid #3388e8;
	// 	border-radius: 10upx;
	// }

	// .txt3 {
	// 	font-size: 40upx;
	// 	font-weight: 500;
	// 	color: #333333;
	// 	margin: 0 20upx;
	// }

	.lines {
		margin-bottom: 50upx;

		.line {
			width: 100upx;
			height: 1upx;
			background-color: #333333;
		}
	}

	.pics {
		width: 94vw;
		margin: 60upx 0 100upx 0;

		.pic {
			width: 100%;
			border-radius: 10upx;
		}
	}

	.title {
		width: 100%;
		font-weight: 600;
		font-size: 36upx;
		color: #333333;
	}

	.filings {
		font-size: 30upx;
		font-weight: 500;
		color: #333333;
		margin-bottom: 100upx;
	}
</style>